<template>
	<view class="content">
		<view class="topSearch" :style="{'margin-top':tops+'px'}">
			<view class="tabList">
				<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
					@click="tabChange(index)">{{ item.text }}</view>
			</view>
			<view class="screen">
				<uni-easyinput class="searchInput" prefixIcon="search" v-model="value" placeholder="姓名、电话等" @iconClick="iconClick">
				</uni-easyinput>
				<view class="find" @click="showPop">
					<span>筛选跟进类别</span>
					<image src="/static/2.png"></image>
				</view>
			</view>
			<view class="totalNum" v-if="!screenPop">
				<view class="line"></view>
				<view class="text">3条跟进数据</view>
			</view>
			<view class="screen-box" v-if="screenPop">
				<view class="title">跟进标志</view>
				<view class="list">
					<uni-data-checkbox mode="tag" multiple v-model="screen_value" :localdata="screen_list"></uni-data-checkbox>
				</view>
				<view class="title">时间筛选</view>
				<uni-datetime-picker class="dataRrange" v-model="dataRrange" type="daterange" @maskClick="maskClick" />
				<view class="btn-group">
					<view>重置</view>
					<view @click="confirmScreen">筛选</view>
				</view>
			</view>
		</view>
		
		<view class="lists" :style="{'margin-top':tops+160+'px'}">
			<view class="li" @click="detail">
				<view>客户姓名</view>
				<view>1316165888</view>
				<view>与张总进行线下拜访</view>
				<view>发展中</view>
				<view class="time">修改时间：2024年8月6日 12时50分</view>
				<image class="right" src="../../static/11.png"></image>
			</view>
			
		</view>
		<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeScreen">
			<view class="screen-box" :style="{'padding-top':tops+100+'px'}">
				<view class="title">跟进标志</view>
				<view class="list">
					<uni-data-checkbox mode="tag" multiple v-model="screen_value" :localdata="screen_list"></uni-data-checkbox>
				</view>
				<view class="title">时间筛选</view>
				<uni-datetime-picker class="dataRrange" v-model="dataRrange" type="daterange" @maskClick="maskClick" />
				<view class="btn-group">
					<view>重置</view>
					<view @click="confirmScreen">筛选</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		list_genjin,
		add_genjin,
		put_genjin
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: [{
						text: '全部跟进'
					},
					{
						text: '今日跟进'
					}
				],
				tabActive: 0,
				screen_list: [{
					text: '足球',
					value: 0
				}, {
					text: '篮球',
					value: 1
				}, {
					text: '游泳',
					value: 2
				}],
				// 跟进状态
				screen_value: [],
				// 时间段
				dataRrange:'',
				tops:0,
				height:0,
				screenPop:false,
			}
		},
		onLoad() {
			
			uni.getSystemInfo({

				success: (e) => {

				  this.tops = e.statusBarHeight;

				  let custom = uni.getMenuButtonBoundingClientRect();

				  this.height = custom.height + (custom.top - e.statusBarHeight) * 2;

				}

			  })

		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			showPop(){
				 if(this.screenPop){
				 	 this.screenPop = false
				 }else{
				 	this.screenPop = true
				 }
			},
			closeScreen(){
				console.log('关闭')
				 this.screenPop = false
			},
			confirmScreen(){
				this.$refs.popup.close()
			},
			detail(){
				uni.navigateTo({
					url:"/pages/genjinDetail/index"
				})
			},
			tabChange(index) {
				this.tabActive = index
			},
			history(){
				uni.navigateTo({
					url:'/pages/customerHistory/index'
				})
			},

		

		}
	}
</script>

<style>
	/deep/ .uni-calendar__content-mobile{
		top: 300rpx !important;
	}
	.topSearch{
		width: 100%;
		height: 180rpx;
		position: fixed;
		top: 20rpx;
		background-color: white;
		z-index: 100;
	}
	.topSearch .screen{
		width:90%;
		height: 80rpx;
        margin: auto;
	}
	.topSearch .screen .searchInput{
		width: 60% !important;
		float: left;
	}
	.topSearch .screen /deep/.uni-easyinput{
		width: 60% !important;
		float: left;
	}
	.topSearch .find{
		width: 36%;
		float: right;
		height: 64rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		border: 1px solid #dcdfe6;
		display: flex;
		font-size: 24rpx;
		border-radius: 5rpx;
		color: #999;
		justify-content: space-between;
	}
	.topSearch .find image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		margin-top: 13rpx;
		
	}
	.tabList {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #333;
		/*#ifdef MP-WEIXIN*/
		/* margin-top: 200rpx; */
		/*#endif*/
		display: flex;
	}

	.tabList .li {
		width: 200rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}

	.tabActive {
		color: #008BDE !important;
		font-size: 30rpx !important;
	}

	.screen-box{
		
		background-color: white;
		font-size: 26rpx;
		padding-bottom: 50rpx;
		position: absolute;
		width: 100%;
		z-index: 10;
		padding-top: 10rpx;
		border-bottom: 1rpx solid #ccc;
	}
	.screen-box .title{
		width: 90%;
		height: 50rpx;
		margin: auto;
		margin-top: 20rpx;
	}
	.screen-box .list{
		width: 90%;
		margin: auto;
		
	}
	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag{
		width: 164rpx;
		text-align: center;
	}
	 /deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content{
		 display: initial !important;
	 }
	 .screen-box .dataRrange{
		 width: 90% !important;
		 margin: auto;
	 }
	 .screen-box /deep/.uni-date{
		 width: 90% !important;
		 margin: auto;
	 }
	 /deep/.uni-calendar__content-mobile{
		bottom: initial !important; 
	 }
	 
	 .screen-box .btn-group{
		 width: 400rpx;
		 height: 60rpx;
		 margin: auto;
		 display: flex;
		 justify-content: space-between;
		 margin-top: 100rpx;
	 }
	  .screen-box .btn-group view{
		  width: 140rpx;
		  height: 60rpx;
		  line-height: 60rpx;
		  text-align: center;
	  }
	 .screen-box .btn-group view:nth-child(1){
		 border: 1rpx solid #ccc;
		 border-radius: 10rpx;
	 }
    .screen-box .btn-group view:nth-child(2){
    		 background-color:#008BDE;
			 color: white;
			 border-radius: 10rpx;
    }
	
	.lists{
		width: 90%;
		margin: auto;
	}
	.lists .li{
		line-height: 70rpx;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		position: relative;
	}
	.lists .li .time{
		color: #999;
	}
	.lists .li .right{
		width: 22rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 36%;
	}
	.totalNum{
		width: 90%;
		height: 80rpx;
		margin: auto;
		display: flex;
		margin-top: 50rpx;
		font-size: 28rpx;
		background-color: white !important;
	}
	.totalNum .line{
		width: 5rpx;
		height: 34rpx;
		background-color: #008BDE;
	}
	.totalNum .text{
		margin-left: 20rpx;
	}

</style>